<template>
  <!-- 批量优惠券核销 -->
  <u-dialog :title="title" :show.sync="show" width="1300px" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm">
    <u-table
      :data="list"
      :loading="listLoading"
      :options="listOptions"
      :columns="columns"
      :page="false"
    >
      <template v-slot:right>
        <el-table-column label="核销" align="center" fixed="right">
          <template slot-scope="{ row }">
            <el-input v-model="row.number" :disabled="row.coupontype === 3" placeholder="请输入核销金额或者次数" clearable style="width: 120px" />
          </template>
        </el-table-column>
      </template>
    </u-table>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 批量优惠券核销
 */
export default {
  name: 'BatchCouponConsume',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Array,
      default: () => []
    },
    /** 是否卡劵 */
    card: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      api: this.$u.api.MarketCouponCard,
      // 表格
      columns: [
        {
          prop: 'couponno',
          label: '劵号'
        },
        {
          prop: 'couponname',
          label: '名称',
          render: (h, params) => {
            if (params.row.couponname) {
              return h('el-tag', { props: { effect: 'plain' }}, params.row.couponname)
            }
          }
        },
        {
          prop: 'balance',
          label: '金额/次数',
          render: (h, params) => {
            const { balance, coupontype } = params.row
            const unit = coupontype === 2 ? '次' : '元'
            return h('span', { style: { fontWeight: 'bold', color: '#4CAF50 !important' }}, balance + unit)
          }
        }
      ],
      list: [],
      // 加载数据加载状态
      listLoading: false,
      listOptions: {
        mutiSelect: false,
        stripe: true
      },
      title: '批量优惠券核销'
    }
  },
  watch: {
    show(newVal) {
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        const arr = this.$u.deepClone(this.data)

        arr.map(item => {
          const { balance } = item
          item.number = balance.toString()
          return item
        })

        this.list = arr
        // console.log(this.list)
      }
    }
  },
  created() {
    if (this.card) {
      this.api = this.$u.api.MarketCouponCardsingle
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this

      const arr = self.list.map(item => {
        const { couponno, openid, number } = item
        const balance = number
        return {
          couponno,
          openid,
          balance
        }
      })

      // console.log(arr)

      // 模态对话框组件
      self.$confirm('批量优惠券核销' + arr.length + '条数据，是否继续核销？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        // console.log(arr)

        // 处理确认事件
        self.api.batchconsume({ arr }).then(() => {
          // 通知信息
          self.$u.msg('[批量操作]优惠券核销成功')
          // 双向绑定数据
          self.$emit('changeShow', false)
          // 更新成功后传递
          self.$emit('change')
        })
      }).catch(() => {
      })
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
